<template>
	<!-- 公共头部 -->
	<common-head></common-head>
	<view class="head-box">
		<image class="img1" src="https://build.gzwhir.com/zygzmr202410252905/appImages/p-16.jpg" mode="widthFix"></image>
		<view class="txt-box">
			<view class="title">舒缓修护 强韧屏障</view>
			<view class="name">Jiaselin安肌舒护肌底液</view>
			<view class="tips">抗氧化 | 抗炎 | 提升吸收</view>
		</view>
	</view>
	<view class="main">
		<view class="main-con">
			<view class="title">产品成分与功效</view>
			<view class="txt">针对肌肤的敏感、干燥、泛红等问题，进行舒缓修护，
	恢复肌肤健康状态。</view>
			<view class="txt">帮助肌肤更好地吸收后续护肤品中的营养成分，提升
	护肤效果。</view>
			<view class="txt">增强肌肤屏障功能，降低外界环境对肌肤的伤害。</view>
		</view>
	</view>
	<image class="img1" src="https://build.gzwhir.com/zygzmr202410252905/appImages/p-17.png" mode="widthFix"></image>
	
</template>

<script setup>
	import { ref } from 'vue'
	
</script>

<style lang="scss">
.img1{
	width: 100%;
	display: block;
}
.head-box{
	position: relative;
	
	.txt-box{
		position: absolute;
		left: 0;
		top: 140rpx;
		width: 100%;
		text-align: center;
		
		.title{
			font-size: 52rpx;
			color: #333;
			font-weight: bold;
		}
		.name{
			font-size: 24rpx;
			color: #333;
			margin-top: 16rpx;
			margin-bottom: 24rpx;
		}
		.tips{
			font-size: 28rpx;
			color: #5e748a;
		}
	}
}

.main{
	padding: 80rpx 40rpx 20rpx;
	background: linear-gradient(to bottom, #cbd3d8, #f5f5f5);
	
	.main-con{
		padding: 80rpx 40rpx 60rpx;
		background: linear-gradient(to bottom, #e9ecef, #f9f9f9);
		border-radius: 10rpx 60rpx 10rpx 10rpx;
		
		.title{
			font-size: 40rpx;
			color: #333;
			font-weight: bold;
			background: url("@/static/images/bg5.png") no-repeat center 45rpx;
			background-size: auto;
			padding-bottom: 40rpx;
			text-align: center;
		}
		.txt{
			font-size: 24rpx;
			color: #555;
			line-height: 42rpx;
			position: relative;
			padding-left: 20rpx;
			margin-bottom: 10rpx;
			
			&:before{
				content: "";
				position: absolute;
				left: 0;
				top: 18rpx;
				width: 7rpx;
				height: 7rpx;
				border-radius: 7px;
				background: #888;
			}
		}
	}
}


</style>
